<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
    <!-- vue2 -->
    <script src="script/vue_2.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- jquery 3.6 -->
    <script src="script/jquery-3.6.0.min.js"></script>

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-collapse-item__header{
            text-align:center;
        }
        .el-collapse-item__content{
            padding-bottom: 0px;
        }
        .el-collapse-item{
            border: 2px solid black;
        }
        
        body > .el-container {
            margin-bottom: 40px;
        }
    </style>
    <script>
        var app;
        $(function(){
			idi = 0;
            app = new Vue({
				el: '#app',
				data: {
                    datacontext:{
                        Context:{
                            name: "第一层",
                            value: 1,
                            items: []
                        },
                        Templates:{
                            t01:'{"id":"0","name":"新项","value":0}'
                        }
                    }
				}
			});
		});
        
        function envsafe_pushArray(array, temp){
			let ni = JSON.parse(temp);
			idi++;
			
			ni.id=idi.toString();
            array.push(ni);
			app.$nextTick(()=>{
				let dom = document.getElementById(ni.id);
				alert(dom);
			});
        };

		function envsafe_spliceArray(array, btn){
			const index = $(btn).attr('envsafe-data-index');
			if (index > -1) {
			  array.splice(index, 1);
			}
		};
		let idi;
    </script>
</head>
<body>
    <div id="app">
		<el-container>
			<el-header>
				Context
			</el-header>
			<el-main>
				<el-row>
					<el-col :span="12">
						name
					</el-col>
					<el-col :span="12">
						<el-input v-model="datacontext.Context.name" />
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						value
					</el-col>
					<el-col :span="12">
						<el-input v-model="datacontext.Context.value" />
					</el-col>
				</el-row>
				<el-row>
                    <el-collapse>
                        <el-collapse-item>
                            <template slot='title'> 
                                <el-row>
                                    <el-tooltip content='Context 所含的项集合'><span>Context 的 items</span></el-tooltip>
                                </el-row>
                            </template>
                            <el-container>
                                <el-header>
                                    <el-row :gutter='10'>
                                    <el-col :span='24'><el-button type='primary' onclick='envsafe_pushArray(app.datacontext.Context.items,app.datacontext.Templates.t01)'>新建项</el-button></el-col>
                                    </el-row>
                                </el-header>
                            <el-main>
                            <el-collapse>
                                <el-collapse-item v-for="(item, index) in datacontext.Context.items">
                                    <template slot='title'>
                                        <el-row>
											项
										</el-row>
                                    </template>
                                    <el-container :key="item.id" :id="item.id">
										<el-header>
											<el-button type='danger' :envsafe-data-index='index' onclick='envsafe_spliceArray(app.datacontext.Context.items,this)'>移除此项</el-button>
										</el-header>
									<el-main>
                                        <el-row>
                                            <el-col :span="12">
                                                name
                                            </el-col>
                                            <el-col :span="12">
                                                <el-input v-model="item.name" />
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                value
                                            </el-col>
                                            <el-col :span="12">
                                                <el-input v-model="item.value" />
                                            </el-col>
                                        </el-row>
                                    </el-main></el-container>
                                </el-collapse-item>
                            </el-collapse>
                        </el-main></el-container>
                        </el-collapse-item>
                    </el-collapse>
				</el-row>
			</el-main>
		</el-container>
    </div>
</body>